<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-01-22 18:30:02
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-03-06 19:31:13
 * @FilePath: /meeting-minutes-h5/src/components/ConferenceMinutes/Analysis/CustomerAttitude.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="container">
    <van-empty v-if="attitudeList.length === 0" description="暂无内容" />
    <template v-else>
      <div class="session-view inter-session-view">
        <div class="session-header">
          <h4>客户整体态度</h4>
          <img :src="attitudeIcon" />
        </div>
        <p class="content">
          {{ attitudeReson }}
        </p>
      </div>

      <div class="session-view" v-for="item in attitudeList" :key="item">
        <van-row class="title-view">
          <van-row>
            <h4>{{ item.name }}</h4>
            <span :class="`tag-bg ${mapItemToBgColor(item)}`" style="margin-left: 8px">{{
              item.tag
            }}</span>
          </van-row>
          <div class="detail" @click="onClickReview(item)">回顾</div>
        </van-row>
        <p>{{ item.reson }}</p>
        <span
          class="tag"
          v-show="item.positiveFeedback > 0"
          @click="onClickFeedback(item, (isNegative = false))"
          >积极反馈({{ item.positiveFeedback }})</span
        >
        <span
          class="tag"
          v-show="item.negativeFeedback > 0"
          @click="onClickFeedback(item, (isNegative = true))"
          >负面反馈({{ item.negativeFeedback }})</span
        >
      </div>
    </template>
  </div>
</template>

<script>
import { mapState, mapActions } from "pinia";
import { useMinutesStore } from "@/store";
import { showToast } from "vant";

export default {
  name: "CustomerAttitude",
  data() {
    return {
      icons: {
        active: "@/assets/conferenceMinutes/active.svg",
        negative: "@/assets/conferenceMinutes/negative.svg",
        neutral: "@/assets/conferenceMinutes/neutral.svg",
      },
    };
  },
  methods: {
    ...mapActions(useMinutesStore, {
      setPlayerTimeStamp: "setPlayerTimeStamp",
      setPlayerTimeStampByRealTime: "setPlayerTimeStampByRealTime",
    }),

    mapItemToBgColor(item) {
      const { tag } = item;
      if (tag === "积极") {
        return "tag-bg-green";
      }
      if (tag === "中性") {
        return "tag-bg-gray";
      }
      if (tag === "消极") {
        return "tag-bg-red";
      }
      return "tag-bg-green";
    },

    onClickReview(item) {
      console.log("onClickReview: ", item);
      // 优先跳转积极的，否则消极
      let bt = item.positiveBt || item.negativeBt;
      if (!bt) {
        showToast("时间戳为空");
        return;
      }
      this.setPlayerTimeStampByRealTime(bt);
    },

    onClickFeedback(item, isNegative) {
      console.log("onClickFeedback: ", item);
      this.setPlayerTimeStampByRealTime(isNegative ? item.negativeBt : item.positiveBt);
    },
  },
  computed: {
    ...mapState(useMinutesStore, {
      customerAttitude: "customerAttitude",
      attitudeReson: "attitudeReson",
      attitudeIcon: "attitudeIcon",
      attitudeList: "attitudeList",
      todoInfo: "todoInfo",
    }),
  },
};
</script>

<style lang="less" scoped>
@import "./analysis.less";

.container {
  padding: 15px 15px 0 15px;
}

.inter-session-view {
  padding: 0;
}

.content {
  margin: 15px 20px;
}
</style>
